<template>
    <div>
        <tiny-form size="small" label-width="100px" label-position="right"  :model="data.taskData"  ref="ruleForms" :rules="taskRule">
            <tiny-row :flex="true" :gutter="20" >
                <tiny-col :span="10" :no="3">
                    <tiny-form-item label="任务名称" prop ="jobName">
                        <tiny-input v-model="data.taskData.jobName" placeholder="任务名称"></tiny-input>
                    </tiny-form-item>
                </tiny-col>
                <tiny-col :span="10" :no="4">
                    <tiny-form-item label="任务描述">
                        <tiny-input v-model="data.taskData.jobDescription" placeholder="任务描述"></tiny-input>
                    </tiny-form-item>
                </tiny-col>
            </tiny-row>
            <tiny-row  :gutter="20">
                <tiny-col :span="20" :no="4">
                    <tiny-form-item label="任务参数" prop ="jobParams">
                        <tiny-input v-model="data.taskData.jobParams" type="textarea" placeholder="任务参数"></tiny-input>
                    </tiny-form-item>
                </tiny-col>
            </tiny-row>
            <tiny-row :flex="true" :gutter="24">
                <tiny-col :span="4" :no="3">
                    <tiny-form-item label="定时信息" prop = "timeExpressionType">
                        <vo-select default dictCode="powerJobTimeExpressionType" v-model:value="data.taskData.timeExpressionType"  placeholder="定时信息" />
                    </tiny-form-item>
                </tiny-col>
        
                <tiny-col :span="8" :no="3">
                    <tiny-form-item >
                        <tiny-input v-model="data.taskData.timeExpression" placeholder="CRON 填写 CRON 表达式，秒级任务填写整数，API 无需填写"></tiny-input>
                    </tiny-form-item>
                </tiny-col>
                <tiny-col :span="2" :no="3" v-if="data.taskData.timeExpressionType=='CRON'">
                    <tiny-button ghost type="success" text="CRON表达式选择"> </tiny-button>
                </tiny-col>
                <tiny-col :span="2" :no="3" v-if="data.taskData.timeExpressionType=='CRON'">
                    <tiny-button ghost type="success" text="选择"> </tiny-button>
                </tiny-col>
                <tiny-col :span="4" :no="3">
                    <tiny-button ghost type="info" text="校验定时参数"> </tiny-button>
                </tiny-col>
            </tiny-row>
            <tiny-row :flex="true" :gutter="20">
                <tiny-col :span="5" :no="4">
                    <tiny-form-item label="生命周期">
                        <tiny-date-picker
                        v-model="data.taskData.lifeCycleNew"
                        type="datetimerange"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="timestamp"
                        ></tiny-date-picker>
                    </tiny-form-item>
                </tiny-col>
            </tiny-row>

            <tiny-row :flex="true" :gutter="24">
                <tiny-col :span="4" :no="3">
                    <tiny-form-item label="执行配置" prop="executeType">
                        <vo-select  dictCode="powerJobExecuteType" v-model:value="data.taskData.executeType"  placeholder="执行配置" />
                    </tiny-form-item>
                </tiny-col>
                <tiny-col :span="4" :no="3">
                    <tiny-form-item>
                        <vo-select  dictCode="powerJobProcessorType" v-model:value="data.taskData.processorType"  placeholder="处理器配置" />
                    </tiny-form-item>
                </tiny-col>
                <tiny-col :span="12" :no="3">
                    <tiny-form-item>
                        <tiny-input v-model="data.taskData.processorInfo" placeholder="容器ID#全限定类名，eg：1#tech.powerjob.HelloWordProcessor"></tiny-input>
                    </tiny-form-item>
                    
                </tiny-col>
            </tiny-row>
            <tiny-row :flex="true" :gutter="20">
                <tiny-col :span="5" :no="3">
                <tiny-form-item label="运行配置" prop="dispatchStrategy">
                    <vo-select  dictCode="powerJobDispatchStrategy" v-model:value="data.taskData.dispatchStrategy" placeholder="运行时配置" />
                </tiny-form-item>
                </tiny-col>
                <tiny-col :span="5" :no="3">
                    <tiny-input v-model="data.taskData.maxInstanceNum" > <template #prepend>最大实例数</template></tiny-input>
                </tiny-col>
                <tiny-col :span="5" :no="3">
                    <tiny-input v-model="data.taskData.concurrency" ><template #prepend>单机线程并发度</template></tiny-input>
                </tiny-col>
                <tiny-col :span="5" :no="3">
                    <tiny-input v-model="data.taskData.instanceTimeLimit"><template #prepend>运行时间限制（毫秒）</template></tiny-input>
                </tiny-col>
            </tiny-row>
            <tiny-row :flex="true" :gutter="20">
                <tiny-col :span="10" :no="3">
                <tiny-form-item label="重试配置">
                    <tiny-input v-model="data.taskData.instanceRetryNum"><template #prepend>Instance 重试次数</template></tiny-input>
                </tiny-form-item>
                </tiny-col>
                <tiny-col :span="10" :no="3">
                    <tiny-input v-model="data.taskData.taskRetryNum" ><template #prepend>Task 重试次数</template></tiny-input>
                </tiny-col>
            </tiny-row>
            <tiny-row :flex="true" :gutter="24">
                <tiny-col :span="8" :no="3">
                <tiny-form-item label="机器配置">
                    <tiny-input v-model="data.taskData.minCpuCores" ><template #prepend>最低 CPU 核心数</template></tiny-input>
                </tiny-form-item>
                </tiny-col>
                <tiny-col :span="8" :no="3">
                    <tiny-input v-model="data.taskData.minMemorySpace" ><template #prepend>最低 CPU 核心数</template></tiny-input>
                </tiny-col>
                <tiny-col :span="8" :no="3">
                    <tiny-input v-model="data.taskData.minDiskSpace"><template #prepend>最低 CPU 核心数</template></tiny-input>
                </tiny-col>
            </tiny-row>
            <tiny-row :flex="true" :gutter="20">
                <tiny-col :span="10" :no="3">
                <tiny-form-item label="集群配置">
                    <tiny-input v-model="data.taskData.designatedWorkers" ><template #prepend>执行机器地址</template></tiny-input>
                </tiny-form-item>
                </tiny-col>
                <tiny-col :span="10" :no="3">
                    <tiny-input v-model="data.taskData.maxWorkerCount" ><template #prepend>最大执行机器数量</template></tiny-input>
                </tiny-col>
            </tiny-row>
            <tiny-row :flex="true" :gutter="20">
                <tiny-col :span="5" :no="3">
                <tiny-form-item label="报警配置">
                    <vo-select  dictCode="powerJobUser" multiple  collapse-tags v-model:value="data.taskData.notifyUserIds"  placeholder="报警配置" />
                </tiny-form-item>
                </tiny-col>
                <tiny-col :span="5" :no="3">
                    <tiny-input v-model="data.taskData.alarmConfig.alertThreshold"><template #prepend>错误阈值</template></tiny-input>
                </tiny-col>
                <tiny-col :span="5" :no="3">
                    <tiny-input v-model="data.taskData.alarmConfig.statisticWindowLen" ><template #prepend>统计窗口(s)</template></tiny-input>
                </tiny-col>
                <tiny-col :span="5" :no="3">
                    <tiny-input v-model="data.taskData.alarmConfig.silenceWindowLen" ><template #prepend>沉默窗口(s)</template></tiny-input>
                </tiny-col>
            </tiny-row>
            <tiny-row :flex="true" :gutter="24">
                <tiny-col :span="8" :no="3">
                <tiny-form-item label="日志配置">
                    <vo-select default dictCode="powerJobLogType" v-model:value="data.taskData.logConfig.type" placeholder="报警配置" />
                </tiny-form-item>
                </tiny-col>
                <tiny-col :span="8" :no="3">
                <tiny-form-item label="日志级别">
                    <vo-select  dictCode="powerJogLogLevel" v-model:value="data.taskData.logConfig.level" placeholder="日志级别" />
                </tiny-form-item>
                </tiny-col>
                <tiny-col :span="8" :no="3">
                    <tiny-input v-model="data.taskData.logConfig.loggerName" ><template #prepend>日志名称</template></tiny-input>
                </tiny-col>
            </tiny-row>
            <tiny-row :flex="true" :gutter="24">
            <tiny-col :span="8" :no="3">
                <tiny-form-item label="高级设置">
                    <vo-select  dictCode="powerJobTaskTrackerBehavior" v-model:value="data.taskData.advancedRuntimeConfig.taskTrackerBehavior" placeholder="高级设置" />
                </tiny-form-item>
                </tiny-col>
            </tiny-row> 
            <tiny-row class="sub_info">
                <tiny-form-item>
                    <tiny-button ghost type="primary" @click="saveTask">保存</tiny-button>
                    <tiny-button ghost type="info" @click="cancelTask">取消</tiny-button>
                </tiny-form-item>
            </tiny-row>
            {{ props.taskData }}
        </tiny-form>
    </div>  
</template>
<script setup>
 import {reactive, ref, getCurrentInstance,onMounted} from 'vue';  
 import { TinyDatePicker } from '@opentiny/vue'
 const {proxy} = getCurrentInstance();
 import {cosSystem} from '@/stores/system.js';
 let store = cosSystem();
 const data = reactive({
    taskData: {
        lifeCycleNew:[],
        lifeCycle:{},
        alarmConfig:{},
        logConfig:{},

    }
 })
 
 const props = defineProps({
    data: {}
 })
 const ruleForms = ref();
 const taskRule = ref({
    jobName: [{required: true, message: '请填写任务名称', trigger: 'blur'}],
    jobParams: [{required: true, message: '请填写任务参数', trigger: 'blur'}],
    timeExpressionType: [{required: true, message: '请选择任务信息', trigger: 'blur'}],
    executeType: [{required: true, message: '请配置执行配置', trigger: 'blur'}],
    dispatchStrategy: [{required: true, message: '请配置运行时配置', trigger: 'blur'}],
  });

  const emits = defineEmits(['update:isShow']);
 data.taskData = props.data;
 data.taskData.lifeCycleNew = [new Date(data.taskData.lifeCycle.start), new Date(data.taskData.lifeCycle.end)];
 const saveTask = ()=>{
    console.log(data.taskData);
    ruleForms.value.validate((valid) => {
        if (valid) {
            proxy.$api.taskJob.saveJob(data.taskData).then(res=>{
                console.log(res);
                if(res.success){
                    emits('update:isShow', false);
                }
            })
        } else {
            return false;
        }
    });
 }

</script>

<style lang="scss" scoped>
.sub_info{
    margin-top:20px;
    text-align: center;
}
.tiny-form-item{
    margin-bottom:10px;
}

</style>

